<script lang="ts" setup>
import list from './carousel/list.vue'
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import {
  UserFilled,
  Briefcase,
  Menu,
  StarFilled
} from '@element-plus/icons-vue'
const activeName = ref('first')
const tabs = shallowRef([
  { name: 'first', label: '业务系统', icon: Menu },
  { name: 'second', label: '服务推荐', icon: StarFilled },
  { name: 'third', label: '我的收藏', icon: Briefcase },
  { name: 'fourth', label: '常用服务', icon: UserFilled }
])
const emit = defineEmits<{
  (e: 'handleClick', tab: TabsPaneContext): void
}>()
const handleClick = (tab: TabsPaneContext) => {
  emit('handleClick', tab)
}
</script>

<template>
  <div class="zhong-1">
    <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane v-for="(tab, index) in tabs" :key="index" :name="tab.name">
        <template #label>
          <span class="cu-1">
            <component :is="tab.icon" class="icon-large" :key="index" />
            <span>{{ tab.label }}</span>
          </span>
        </template>
        <list></list>
      </el-tab-pane>
    </el-tabs>
    <div class="geduo-1">
      <span>更多></span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.zhong-1 {
  width: 640px;
  height: 100%;
  display: flex;
}
.cu-1 {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
}
.geduo-1 {
  width: 70px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 0.5px solid #dcdfe6;
  box-sizing: border-box;
  font-size: 14px;
  color: #1881d2;
  cursor: pointer;
}
.icon-large {
  font-size: 24px;
  width: 17px !important; /* 调整为您希望的大小 */
}
</style>
